import { NavLink } from 'react-router-dom'
import { Switch, Route } from 'react-router-dom'

import RandomList from './views/N11.22/RandomList/Two'
import AudioControls from './views/N11.22/RandomList/Three'
import Fore from './views/N11.22/RandomList/Fore'

import style from './App.module.scss'
const routesCon = [
  { path: '/', component: RandomList, label: '作业2' },
  { path: '/three', component: AudioControls, label: '作业3' },
  { path: '/fore', component: Fore, label: '作业4' },
]
export const routes = (
  <Switch>
    {routesCon.map((config, index) => {
      return <Route exact key={index} {...config} />
    })}
  </Switch>
)
export const links = (
  <ul>
    {routesCon.map(({ path, component, label }, index) => {
      return (
        <li key={index}>
          <NavLink
            exact
            to={path}
            className={(isActive) =>
              style.navLink + (isActive ? ` ${style.selected}` : '')
            }
          >
            {label || component.name}{' '}
          </NavLink>
        </li>
      )
    })}
  </ul>
)
